<template>
  <v-card>
    <v-card-title>
      <v-flex xs3 mr-5>
        <v-select
          :items="typeData"
          label="查看某年统计数据"
          v-model="filter.year"
        ></v-select>
      </v-flex>
      <v-flex>
        <span>聚合类型：</span>
        <v-btn-toggle mandatory v-model.lazy="filter.type">
          <v-btn flat :value="1">
            年
          </v-btn>
          <v-btn flat :value="2">
            季
          </v-btn>
        </v-btn-toggle>
      </v-flex>
    </v-card-title>
    <v-divider/>
    <v-card-text class="px2">
      <div ref="sale" style="width: 100%;height:450px"></div>
    </v-card-text>
  </v-card>
</template>

<script>
  // 按需引入 ECharts 主模块
  var echarts = require('echarts/lib/echarts');
  require('echarts/lib/chart/bar');
  require('echarts/lib/chart/pie');
  require('echarts/lib/chart/line');

  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/toolbox');
  require('echarts/lib/component/title');
  require('echarts/lib/component/legend');

  // import echarts from 'echarts'

  export default {
    name: "statis",
    data(){
      return {
        filter:{
          year:null,
          type:1
        },
        typeData:[2020,2019,2018,2017,2016,2015,2014,2013,2012]
      }
    },
    mounted(){
      this.$nextTick(() =>{
        var sale = echarts.init(this.$refs.sale);
        sale.showLoading();
        this.$http({
          method: 'get',
          url: '/statis/polymer/years',
          headers: {"x-authorize-token":this.$storeGet("L_TOKEN")}
        }).then( resp => {
          if(resp.data.code == 1){
            let option = {
              color:['#61a0a8', '#d48265', '#91c7ae'],
              title: {
                text: '最新三年销售统计',
                left:500
              },
              legend: {
                left:200,
                itemGap:20,
                data:[],
                inactiveColor:'#ccc'
              },
              grid:[{top:40,bottom:'58%'},{top:'58%',bottom:40}],
              tooltip: {
                trigger: 'axis'
              },
              toolbox: {
                show: true,
                feature: {
                  dataView: {show: true, readOnly: false},
                  magicType: {show: true, type: ['line', 'bar']},
                  restore: {show: true},
                  saveAsImage: {show: true}
                }
              },
              xAxis: [
                {name:'月',type:'category',gridIndex:0,data: [1,2,3,4,5,6,7,8,9,10,11,12]},
                {name:'月',type:'category',gridIndex:1,data: [1,2,3,4,5,6,7,8,9,10,11,12]}
              ],
              yAxis: [{name:'件',type:'value',gridIndex:0},
                {name:'元',type:'value',gridIndex:1}],
              series:[]
            };

            let obj = resp.data.data;
            let year = [];
            let series = [];
            if(resp.data.data != null){
              Object.keys(obj).forEach(function (key) {
                year.push(key);
                let bar = {name:key,type:'bar',xAxisIndex:0,yAxisIndex:0,data:[]};
                let line = {name:key,type:'line',xAxisIndex:1,yAxisIndex:1,data:[]}
                if(obj[key] != null){
                  obj[key].forEach(function (item) {
                    bar.data.push(item.num);
                    line.data.push(item.totalPrice/100);
                  });
                }
                series.push(bar);
                series.push(line);
              });
            }
            option.legend.data=year;
            option.series=series;
            sale.hideLoading();
            sale.setOption(option);
          }else{
            this.$message.error(resp.data.message);
          }
        }).catch(() => {
          this.$message.error("服务器异常");
        });

        sale.on('click',function (params) {
          console.log(params);
        });
      });
    },
    watch: {
      filter: {
        deep: true,
        handler() {
          if(this.filter.type==1){
            this.queryStatisByMonth();
          }else{
            this.queryStatisByQuarter();
          }
        }
      }
    },
    methods:{
      queryStatisByMonth(){
        var sale = echarts.init(this.$refs.sale);
        let years = this.filter.year == null?2020:this.filter.year;
        sale.showLoading();
        this.$http({
          method: 'get',
          url: '/statis/polymer/month/'+years,
          headers: {"x-authorize-token":this.$storeGet("L_TOKEN")}
        }).then( resp => {
          if(resp.data.code == 1){
            let option = {
              color:['#91c7ae'],
              title: {
                text: years+'销售统计',
                left:500
              },
              legend: {
                left:200,
                itemGap:20,
                data:[],
                inactiveColor:'#ccc'
              },
              grid:[{top:40,bottom:'58%'},{top:'58%',bottom:40}],
              tooltip: {
                trigger: 'axis'
              },
              toolbox: {
                show: true,
                feature: {
                  dataView: {show: true, readOnly: false},
                  magicType: {show: true, type: ['line', 'bar']},
                  restore: {show: true},
                  saveAsImage: {show: true}
                }
              },
              xAxis: [
                {name:'月',type:'category',gridIndex:0,data: [1,2,3,4,5,6,7,8,9,10,11,12]},
                {name:'月',type:'category',gridIndex:1,data: [1,2,3,4,5,6,7,8,9,10,11,12]}
              ],
              yAxis: [{name:'件',type:'value',gridIndex:0},
                {name:'元',type:'value',gridIndex:1}],
              series:[]
            };

            let year = [years.toString()];
            let series = [];
            let bar = {name:years,type:'bar',xAxisIndex:0,yAxisIndex:0,data:[]};
            let line = {name:years,type:'line',xAxisIndex:1,yAxisIndex:1,data:[]};
            if(resp.data.data != null){
              resp.data.data.forEach(function (item) {
                bar.data.push(item.num);
                line.data.push(item.totalPrice/100);
              });
            }
            series.push(bar);
            series.push(line);
            option.legend.data=year;
            option.series=series;
            sale.hideLoading();
            sale.setOption(option,true);
          }else{
            this.$message.error(resp.data.message);
          }
        }).catch(() => {
          this.$message.error("服务器异常");
        });
      },
      queryStatisByQuarter(){
        var sale = echarts.init(this.$refs.sale);
        let years = this.filter.year == null?2020:this.filter.year;
        sale.showLoading();
        this.$http({
          method: 'get',
          url: '/statis/polymer/quarter/'+years,
          headers: {"x-authorize-token":this.$storeGet("L_TOKEN")}
        }).then( resp => {
          if(resp.data.code == 1){
            let option = {
              color:['#91c7ae'],
              title: {
                text: years+'销售统计',
                left:500
              },
              legend: {
                left:200,
                itemGap:20,
                data:[],
                inactiveColor:'#ccc'
              },
              grid:[{top:40,bottom:'58%'},{top:'58%',bottom:40}],
              tooltip: {
                trigger: 'axis'
              },
              toolbox: {
                show: true,
                feature: {
                  dataView: {show: true, readOnly: false},
                  magicType: {show: true, type: ['line', 'bar']},
                  restore: {show: true},
                  saveAsImage: {show: true}
                }
              },
              xAxis: [
                {name:'季度',type:'category',gridIndex:0,data: ['第一季度','第二季度','第三季度','第四季度']},
                {name:'季度',type:'category',gridIndex:1,data: ['第一季度','第二季度','第三季度','第四季度']}
              ],
              yAxis: [{name:'件',type:'value',gridIndex:0},
                {name:'元',type:'value',gridIndex:1}],
              series:[]
            };

            let year = [years.toString()];
            let series = [];
            let bar = {name:years,type:'bar',xAxisIndex:0,yAxisIndex:0,data:[]};
            let line = {name:years,type:'line',xAxisIndex:1,yAxisIndex:1,data:[]};
            if(resp.data.data != null){
              resp.data.data.forEach(function (item) {
                bar.data.push(item.num);
                line.data.push(item.totalPrice/100);
              });
            }
            series.push(bar);
            series.push(line);
            option.legend.data=year;
            option.series=series;
            sale.hideLoading();
            sale.setOption(option,true);
          }else{
            this.$message.error(resp.data.message);
          }
        }).catch(() => {
          this.$message.error("服务器异常");
        });
      },
      test(){

      }
    }
  }
</script>

<style scoped>

</style>
